﻿<%@ Page Title="数据概览" Language="C#" MasterPageFile="~/AnalysisMaster.Master" AutoEventWireup="true" CodeBehind="Overview.aspx.cs" Inherits="NetFlow.Overview" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
    <!-- 引入 Chart.js 库 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

    <div class="container-fluid">
        <h2 class="text-center mt-4">数据分析概览</h2>
        <div class="row">
          

            <!-- 区域 2: 协议分布分析 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">协议分布分析</div>
                    <div class="card-body">
                        <canvas id="protocolChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-4">
            <!-- 区域 5: 入方向和出方向的数据流量分析 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据流量分析</div>
                    <div class="card-body">
                        <canvas id="inOutBytesChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>

            <!-- 区域 6: 入方向和出方向的数据包数分析 -->
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header text-center">入方向和出方向的数据包数分析</div>
                    <div class="card-body">
                        <canvas id="inOutPktsChart" style="width: 100%; height: 350px;"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof netFlowData !== 'undefined' ) {
                
                // 获取协议及其对应的出现次数
                function getProtocolData(netFlowData) {
                    return netFlowData.reduce((acc, item) => {
                        if (!acc[item.Protocol]) {
                            acc[item.Protocol] = 0;
                        }
                        acc[item.Protocol] += 1; // 每次遇到该协议，计数加1
                        return acc;
                    }, {});
                }

                var ctx5 = document.getElementById('protocolChart').getContext('2d');
                var protocolData = getProtocolData(netFlowData);
                var protocolLabels = Object.keys(protocolData);
                var protocolValues = Object.values(protocolData);

                new Chart(ctx5, {
                    type: 'doughnut',
                    data: {
                        labels: protocolLabels,
                        datasets: [{
                            data: protocolValues,
                            backgroundColor: ['#FF8C00', '#20B2AA', '#8A2BE2', '#4B0082', '#F0E68C3']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 入方向和出方向的数据流量分析（柱状图）
                var ctx6 = document.getElementById('inOutBytesChart').getContext('2d');
                new Chart(ctx6, {
                    type: 'bar',
                    data: {
                        labels: ['In Bytes', 'Out Bytes'],
                        datasets: [{
                            label: '数据流量 (字节)',
                            data: [
                                netFlowData.reduce((acc, item) => acc + item.InBytes, 0),
                                netFlowData.reduce((acc, item) => acc + item.OutBytes, 0)
                            ],
                            backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });

                // 入方向和出方向的数据包数分析（柱状图）
                var ctx7 = document.getElementById('inOutPktsChart').getContext('2d');
                new Chart(ctx7, {
                    type: 'bar',
                    data: {
                        labels: ['In Packets', 'Out Packets'],
                        datasets: [{
                            label: '数据包数',
                            data: [
                                netFlowData.reduce((acc, item) => acc + item.InPkts, 0),
                                netFlowData.reduce((acc, item) => acc + item.OutPkts, 0)
                            ],
                            backgroundColor: ['rgba(54, 162, 235, 0.6)', 'rgba(255, 99, 132, 0.6)']
                        }]
                    },
                    options: { responsive: true, maintainAspectRatio: false }
                });
            } else {
                console.error("No data available.");
            }
        });
</script>
</asp:Content>